<template>
  <div class="official_nav">
    <a @click="fun('one')" :class="lei1">活动</a>
    <a @click="fun('two')" :class="lei2">公告</a>
    <a @click="fun('three')" :class="lei3">资讯</a>
  </div>
</template>

<script>
export default {
  data(){
    return{
      lei1:'actived',
      lei2:'',
      lei3:''
    }
  },
  methods: {
    fun(data){
      this.lei1 = '';
      this.lei2 = '';
      this.lei3 = '';
      if(data == 'one'){
        this.lei1 = 'actived'
      }
      if(data == 'two'){
        this.lei2 = 'actived'
      }
      if(data == 'three'){
        this.lei3 = 'actived'
      }
    }
  },
}
</script>

<style scoped>
  .official_nav{
    height: .5rem;
    background-color: rgb(245,245,245);
    text-align: center;
    padding: 0 .15rem;
    border-bottom: 1px solid rgb(230,230,230);
  }
  .official_nav a{
    line-height: .5rem;
    font-size: .2rem;
    font-weight: 700;
    color: rgb(155,155,155);
    margin: 0 .3rem;
  }
  .official_nav .actived{
    color: black;
    padding-bottom: .05rem;
    border-bottom: .05rem solid rgb(25,163,254);
  }
</style>